import ReactECharts from 'echarts-for-react';
import { Empty } from 'antd';
import useWindowWidth from '@/hooks/event/use-window-width';
import { highschoolconsultations } from '@/common/types';
import { useEffect, useState } from 'react';
import { format } from 'echarts';


interface Props {
  data: highschoolconsultations[];
  isdataZoom?: boolean
}

const UserActiveLine = ({ data, isdataZoom }: Props) => {


  console.log("yibiaopang============", data)

  const { isPc } = useWindowWidth();

  const [mounted, setMounted] = useState(false);
  const [progress, setProgress] = useState(0);


  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (data.result == "优") {
      setProgress(90)
    } else if (data.result == "良") {
      setProgress(70)
    } else if (data.result == "中") {
      setProgress(50)
    } else if (data.result == "差") {
      setProgress(30)
    } else {
      setProgress(0)
    }


  }, [data]);

  let option = {
    series: [
      {
        type: 'gauge',
        center: ['50%', '60%'],
        radius: '60%',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#00D0FE33' },
              // { offset: 0.7, color: 'rgba(10, 207, 131, 0.2)' },
              { offset: 1, color: '#1B6DFA33' }
            ]
          },
          shadowColor: 'rgba(27, 195, 185, 0.3)',
          shadowBlur: 6
        },
        progress: {
          show: true,
          width: 1
        },
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            width: 1
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        detail: {
          show: false
        },
        data: [
          {
            value: progress
          }
        ]
      },
      {
        type: 'gauge',
        center: ['50%', '60%'],
        radius: '90%',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#00D0FE33' },
              // { offset: 0.7, color: 'rgba(10, 207, 131, 0.2)' },
              { offset: 1, color: '#1B6DFA33' }
            ]
          },
          shadowColor: 'rgba(27, 195, 185, 0.3)',
          shadowBlur: 6
        },
        progress: {
          show: true,
          width: 30,
        },
        axisLine: {
          lineStyle: {
            width: 4
          }
        },
        pointer: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        detail: {
          show: false
        },
        data: [
          {
            value: progress
          }
        ]
      },
      {
        type: 'gauge',
        center: ['50%', '60%'],
        radius: '90%',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 12,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#00D0FE' },   // 起始色
              // { offset: 0.7, color: '#0ACF83' }, // 中间过渡色
              { offset: 1, color: '#1B6DFA' }    // 结束色
            ]
          },
          shadowColor: 'rgba(27, 195, 185, 0.3)',
          shadowBlur: 4
        },
        progress: {
          show: true,
          width: 4
        },
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            width: 4
          }
        },
        axisTick: {
          distance: -14,
          splitNumber: 4,
          lineStyle: {
            width: 1,
            color: '#999'
          }
        },
        splitLine: {
          distance: -14,
          length: 6,
          lineStyle: {
            width: 1,
            color: '#999'
          }
        },
        axisLabel: {
          distance: -10,
          color: '#999',
          fontSize: 20,
          show: false
        },
        anchor: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          width: '10%',
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, '-15%'],
          fontSize: 36,
          fontWeight: 'bolder',
          formatter: data.result,
          color: 'inherit'
        },
        data: [
          {
            value: progress,
          }
        ]
      },
    ]
  };


  return (
    mounted ?
      <div
        style={{
          height: '200px',
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          // backgroundColor: data.length > 0 ? '#ECEFF7' : '',
          // border: "1px solid red"
        }}
      >
        {data && data.length > 0 ? (
          <ReactECharts option={option} style={{ height: isPc ? '100%' : '100%', width: '100%' }} />
        ) : (
          // <Empty description="暂无数据" />
          <ReactECharts option={option} style={{ height: isPc ? '100%' : '100%', width: '100%' }} />

        )}
      </div> : <div>Loading...</div>
  )
}

export default UserActiveLine